<template>
    <div class="s-header">
        <div class="bani" :style="{ height: e.statusBarHeight + 'px', background: background }"></div>
        <div
            class="row items-center relative bani"
            :style="{ height: e.customBarHeight - e.statusBarHeight + 'px', background: background }"
        >
            <div class="col flex flex-center" :style="{ fontSize: fontSize + 'rpx', color: color }">{{ title }}</div>
            <div class="absolute row">
                <div class="flex flex-center" style="padding: 0rpx 20rpx" @click="toBack" v-if="back">
                    <s-icon class="flex inline" type="left" color="#000" size="40" />
                </div>
                <div class="flex flex-center" style="font-size: 30rpx" :style="{ marginLeft: back ? '' : '20rpx' }">
                    {{ backText }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import CSystem from '~/store/CSystem'
const e = CSystem
defineProps({
    /**
     * 返回图标显示
     */
    back: { default: true },
    /**
     * 返回字体内容（左侧字体）
     */
    backText: { default: '返回' },
    /**
     * 背景色
     */
    background: { default: 'var(--s-header-bg)' },
    /**
     * 标题（中间字体）
     */
    title: { default: '' },
    /**
     * 字体大小（中间字体）
     */
    fontSize: { default: 30 },
    /**
     * 字体颜色（中间字体）
     */
    color: { default: 'var(--s-header-title)' }
})
const toBack = () => {
    uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.s-header {
    position: fixed;
    z-index: 98;
    top: 0;
    left: 0;
    width: 100vw;
}
.bani {
    transition: all 1s;
}
</style>
